Marrying Quarto and CSS

An Introduction

Quarto

Quarto makes creating HTML documents a breeze. You can seamlessly weave together narrative text with code, generating dynamic and interactive outputs. Simply write your content in Markdown, embed code chunks for R or Python, and Quarto handles the rest, rendering beautiful HTML pages. This streamlined workflow is perfect for reports, presentations, and even blog posts.

To learn more about Quarto see https://quarto.org.

Running Code

When you click the Render button a document will be generated that includes both content and the output.

You can create output in two columns or callouts of various types (see below). Callouts are a convenient way to highlight important information. These visually distinct blocks can be used to draw attention to key points, warnings, or additional details. You can easily create callouts using simple Markdown syntax, specifying the type of callout (e.g., note, warning, or tip) and the content. Quarto will then render these as styled boxes in the HTML output, making your documents more engaging and easier to navigate. Callouts are a great way to emphasize crucial takeaways and improve the overall readability of your HTML documents.

Content of column 1

Content of column 2

Note

This is a callout block of the type “note”.

Caution

Callouts can be collapsible.

My heading

The first heading used within the callout is used as the callout heading.

Tip

The icon can also be hidden, like this.

This is a simpler callout, without specifying the “type”.

Static and Interactive Tables

Tables are another essential element of many documents, and Quarto provides several ways to create them. You can use simple Markdown syntax for basic tables, or leverage more powerful tools like the kable package in R or yje gt package for more complex and styled tables. Quarto handles the formatting, ensuring your tables look professional and are easy to read in the final HTML document.

# Load libraries and data.
library(tidyverse)       # Data management
library()
library(plotly)              # Create nicely formatted tables
library(gtsummary)       # Create summary tables
library(palmerpenguins)  # Contains the dataframe called "penguins"


# Lets calculate some numbers to be used later on
n_Adelie    <- filter(penguins, species=="Adelie") %>% nrow()
n_Chinstrap <- filter(penguins, species=="Chinstrap") %>% nrow()
n_Gentoo    <- filter(penguins, species=="Gentoo") %>% nrow()

Refences can also be embedded in the narrative, as seen below.

Our data is comprised of 344 peguins; specifically comprised of the species Adelie (n=152), Chinstrap (n=68), and Gentoo (n=68). Penguin charactersitics are presented in Table 1.

penguins %>% 
  select(species, sex, flipper_length_mm, body_mass_g) %>%
  tbl_summary(
      by=species,
      missing = "no",
      statistic = list(all_continuous() ~ "{mean} ({sd})",
                       all_categorical() ~ "{n} ({p}%)"))

Table 1: Penguin charactertics

Characteristic	Adelie N = 1521	Chinstrap N = 681	Gentoo N = 1241
sex
female	73 (50%)	34 (50%)	58 (49%)
male	73 (50%)	34 (50%)	61 (51%)
flipper_length_mm	190 (7)	196 (7)	217 (6)
body_mass_g	3,701 (459)	3,733 (384)	5,076 (504)
1 n (%); Mean (SD)

It is fairly easy to create an interactive table in the quarto doc using the DT package, assuming it is already installed.

Here is a simple code for one.

library(DT)
# load the iris dataset
data(iris)

# Make a table
datatable(iris,
  filter = "top",
)

Table 2: Iris 101

Charts

Beyond text and code, Quarto excels at creating rich visualizations. With built-in support for popular charting libraries like ggplot2 (R) and matplotlib (Python), you can easily generate stunning charts directly within your document. Just write the code to create your chart, and Quarto will embed it in the HTML output. Interactive charts, allowing users to explore the data, are also easily incorporated using plotly.

References can also be included, as below:

Our analyses show that flipper length and body mass are related, see Figure 1.

p1<-ggplot(data = penguins, 
                       aes(x = flipper_length_mm,
                           y = body_mass_g)) +
  geom_point(aes(color = species, 
                 shape = species,
                text = paste("Length:", flipper_length_mm, 
                             "<br>Mass:", body_mass_g, 
                             "<br>Species:", species)),
             size = 2,
             alpha = 0.8) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(x = "Flipper length (mm)",
       y = "Body mass (g)",
       color = "Penguin species",
       shape = "Penguin species") +
  theme_minimal() + 
  theme(legend.position = c(0.2, 0.7),
        plot.title.position = "plot",
        plot.background = element_rect(fill = "#d2e3f3"),
        panel.background = element_rect(fill = "#d2e3f3",
                                        colour = "black",
                                        size = 0.8, linetype = "dashed"),
        plot.caption = element_text(hjust = 0, face= "italic"),
        plot.caption.position = "plot")
ggplotly(p1, tooltip = "text")

Figure 1: Flipper length by body mass

CSS and SCSS

CSS (Cascading Style Sheets). CSS allows you to define styles and apply them to HTML elements, giving you full control over the document’s visual presentation. You can include CSS styles within your Quarto document using HTML’s “style” tag.

SASS files have a “.scss” extension. These files extend the functionality of CSS by allowing for a more organized and modular stylesheets, making it easier to manage and maintain your styles. In this blog, we have created an interbal tag as well as an external scss file for managing these. They control backgrounf color, headings, boxes, text spacing and table settings.